<script setup>
import { computed, onMounted, ref } from "vue";
import { threeJsHooks } from '@/utils/threeHooks'
const { renderScene } = threeJsHooks()

onMounted(() => {
  renderScene()
});

</script>

<template>
  <!-- <Header></Header> -->
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.tip {
  text-align: center;
}

.listArea {
  width: 50vw;
  height: 28.75rem;
  display: flex;
  justify-content: space-around;
}
.listBox {
  width: 17.5rem;
  height: 100%;
  background: linear-gradient(to bottom, #fe7c39, #fd5108, #c52b09);
  border: .0625rem solid #ee3d08;
  border-radius: .75rem;
}

.listTitle {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 1.25rem;
  height: 5rem;
  color: #fff;
  font-size: 1.25rem;
  font-weight: bold;
}
.listItems {
  padding: 0 1.25rem;
  height: 22.5rem;
  white-space: nowrap;
  overflow-y: auto;
}

.listItem {
  color: #fff;
  text-shadow: .125rem .125rem .25rem rgba(0, 0, 0, 0.6);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.listItem:nth-child(n + 2) {
  margin-top: .625rem;
}
</style>
